<template>
	<view class="box">
		<view class="top">
			<view class="title">
				<image class="back" src="https://pic.bangbangtongcheng.com/static/back.png" @click="back" />
			</view>
		</view>
		<view class="login-box">
			<view class="box-title">注册</view>
			<view class="input-box">
				<input v-model="phone" placeholder="请输入手机号" maxlength="11" minlength="11"
					placeholder-class="input-placeholder" />
			</view>
			<view class="input-box">
				<input v-model="Verifys" placeholder="请输入验证码" type="number" placeholder-class="input-placeholder" />
				<view class="getcode" @click="getcode">{{ content }}</view>
			</view>
			<view class="input-box">
				<input v-model="password" placeholder="请输入密码（最少6位）" placeholder-class="input-placeholder"
					password="true" />
			</view>
			<view class="agreement">
				<label style="display: flex;">
					<checkbox-group class="checkbox-group" @change="checkboxC">
						<checkbox value="1" class="round blue" :checked="status"
							:style="status ? 'background:#007aff' : ''" />
					</checkbox-group>
					<view class="text">
						<text>注册即同意</text>
						<view class="tags" @click.stop="tags(3)">《用户协议》</view>
						<view class="tags" @click.stop="tags(2)">《隐私协议》</view>
					</view>
				</label>
			</view>
			<button class="login" :disabled="loading" :loading="loading" hover-class="button-hover"
				@click="register">注册</button>
		</view>
		<!-- <cover-view></cover-view> -->
		<view class="motaikuang" v-show="show" @click="show = false">
			<div class="verify" @click.stop="aaa">
				<verify :show="show" @Handle="Handle"></verify>
			</div>
		</view>
		<view class="motaikuang1" v-show="show1" @click="show1 = false">
			<view class="text" @click.stop="aaa">
				<view class="textTitle">{{ text }}</view>
				<scroll-view class="scroll-view" scroll-y :scroll-top="scrollTop" @scroll='scrollTop2'>
					<!-- <rich-text :nodes="data.content"></rich-text> -->
					<!-- #ifdef MP-WEIXIN -->
					<rich-text :nodes="data.content"></rich-text>
					<!-- #endif -->
					<!-- #ifndef MP-WEIXIN -->
					<mp-html :content="data.content"></mp-html>
					<!-- #endif -->
				</scroll-view>
			</view>
		</view>
	</view>
</template>

<script>
	//#ifdef H5
	import wxshare from "../../utils/index.js";
	//#endif
	import Verify from "@/components/VueImageVerify.vue";
	export default {
		data() {
			return {
				phone: "",
				Verifys: "",
				show: false,
				totalTime: 60,
				content: "获取验证码",
				canClick: true,
				status: false,
				reg_tel: /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-9])\d{8}$/,
				reg_tel1: /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{8,16}$/,
				loading: false,
				password: "",
				code: "",
				status: false,
				checkBoxs: [],
				show1: false,
				data: {},
				curTarget:0,
				scrollTop: 0,
				text:""
			};
		},
		components: {
			verify: Verify
		},
		onLoad(options) {
			/* #ifdef H5 */
			this.jinzhi();
			/* #endif */
		},
		methods: {
			scrollTop2(e) {
				//记录scroll  位置
				this.oldScrollTop = e.detail.scrollTop
			},
			back() {
				uni.navigateBack({
					delta: 1
				});
			},
			aaa() {},
			codes(code) {
				this.Verifys = code;
			},
			checkboxC(e) {
				console.log(e, 1);
				this.checkBoxs = e.detail.value;
			},
			async tags(type) {
				if(type==this.curTarget){
					this.show1 = true;
					return
				}
				this.type = type;
				if (type == 2) {
					this.text = "隐私协议";
				} else if (type == 3) {
					this.text = "用户服务协议";
				}
				await this.getContent();
				this.curTarget=type
				// this.show1 = true;
			},
			getContent() {
				let _this = this;
				_this.$myRequest
					.get("/mob/user/getText", {
						type: this.type
					})
					.then(res => {
						this.data = res.list[0];
						this.scrollTop = this.oldScrollTop
						//当视图渲染结束 重新设置为0
						this.$nextTick(() => {
							this.show1 = true;
							this.scrollTop = 0
						});
					});
			},
			Handle(success) {
				// console.log(success);
				if (!this.canClick) return; //改动的是这两行代码
				this.canClick = false;
				this.show = false;
				this.content = this.totalTime + "s后重新发送";
				this.$myRequest
					.get("/mob/login/phoneVerification.do", {
						phone: this.phone,
						type: 1
					})
					.then(res => {
						console.log(res);
						uni.showToast({
							title: '发送验证码成功',
							icon: "none",
							mask: true
						});
						this.code = res.CODE;
					});
				let clock = setInterval(() => {
					this.totalTime--;
					this.content = this.totalTime + "s后重新发送";
					if (this.totalTime < 0) {
						clearInterval(clock);
						this.content = "重新发送验证码";
						this.totalTime = 60;
						this.canClick = true; //这里重新开启
					}
				}, 1000);
			},
			register() {
				let that = this;
				if (this.loading == true) return;
				if (!this.checkBoxs.length) {
					uni.showModal({
						title: "",
						content: "请同意用户条款",
						showCancel: false,
						success: function(res) {
							if (res.confirm) {
								console.log("用户点击确定");
							} else if (res.cancel) {
								console.log("用户点击取消");
							}
						}
					});
					return;
				}
				this.loading = true;
				if (!this.reg_tel.test(this.phone)) {
					uni.showToast({
						title: "请填写正确的手机号码",
						icon: "none",
						mask: true
					});
					this.loading = false;
					return;
				}
				// if (this.phone.length == 11) {
				//   uni.showToast({
				//     title: "请填写为11为数的手机号码",
				//     icon: "none",
				//     mask: true,
				//   });
				//   this.loading = false;
				//   return;
				// }
				if (this.Verifys != this.code) {
					uni.showToast({
						title: "验证码不正确，请重新填写",
						icon: "none",
						mask: true
					});
					this.loading = false;
					return;
				}
				if (this.password.length < 6) {
					uni.showToast({
						title: "密码格式不正确",
						icon: "none",
						mask: true
					});
					this.loading = false;
					return;
				}

				let data = {};

				if (uni.getStorageSync("userInfo")) {
					let userInfo = "";
					// #ifdef H5
					userInfo = uni.getStorageSync("userInfo");
					//#endif
					//#ifdef APP-PLUS || MP-WEIXIN
					userInfo = JSON.parse(uni.getStorageSync("userInfo"));
					// #endif 
					data = {
						phone: this.phone,
						phoneCode: this.Verifys,
						password: this.password,
						wxOpenid: userInfo.openid ? userInfo.openid : '',
						openId: userInfo.openIdH5 || '',
						zfbOpenid: userInfo.zfbOpenid? userInfo.zfbOpenid : '',
						image: userInfo.image ? userInfo.image : '',
						nikeName: userInfo.nikeName ? userInfo.nikeName : '',
					};
				} else {
					data = {
						phone: this.phone,
						phoneCode: this.Verifys,
						password: this.password
					};
				}
				this.$myRequest.post("/mob/login/phoneRegister", data).then(res => {
					that.loading = false;
					if (!res.success) {
						uni.showToast({
							title: res.msg,
							icon: "none",
							mask: true
						});
					} else {
						uni.showToast({
							title: "注册成功，即将返回首页",
							icon: "none",
							mask: true
						});
						this.getPhone(this.phone)
						// uni.setStorageSync("Pduser", res.userInfo);
						// that.$store.dispatch("user/login", res.userInfo);
						// setTimeout(function() {
						// 	uni.reLaunch({
						// 		url: "/pages/index/index"
						// 	});
						// }, 1500);
					}
				});
			},
			getPhone(phone){
				let that =this
				this.$myRequest.get("mob/login/getUserInfoByPhone", {
					phone:phone
				}).then(res => {
					uni.setStorageSync("Pduser", res.userInfo);
					that.$store.dispatch("user/login", res.userInfo);
					setTimeout(function() {
						uni.reLaunch({
							url: "/pages/index/index"
						});
					}, 500);
				});
			},
			getcode() {
				this.phone = this.phone.trim();
				if (!this.reg_tel.test(this.phone)) {
					uni.showToast({
						title: "请填写正确的手机号码",
						icon: "none",
						mask: true
					});
					return;
				}
				if (this.canClick) {
					this.show = true;
				}
			},
			jinzhi() {
				let _this = this;
				let param = window.location.href.split("#")[0];
				uni.request({
					method: "post",
					data: {
						url: param
					},
					header: {
						"content-type": "application/x-www-form-urlencoded"
					},
					url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
					success(re) {
						_this.jinzhifx(re.data);
					}
				});
			},
			jinzhifx(data) {
				wxshare.config({
					debug: false, //是否打开调试
					appId: data.appId, // 公众号的唯一标识
					timestamp: data.timestamp, // 生成签名的时间戳
					nonceStr: data.nonce, // ，生成签名的随机串
					signature: data.signature, // 签名
					jsApiList: ["hideMenuItems"]
				});
				// 禁止分享
				wxshare.hideMenuItems({
					// 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
					menuList: [
						"menuItem:share:appMessage",
						"menuItem:share:timeline",
						"menuItem:share:timeline",
						"menuItem:share:qq",
						"menuItem:favorite",
						"menuItem:share:QZone",
						"menuItem:openWithSafari"
					]
				});
			}
		}
	};
</script>

<style lang="less" scoped>
	.box {
		min-height: 100vh;
		background: #fff;
	}

	.top {
		padding-top: 88rpx;
		// background: #64b6a8;
		background: transparent;

		.title {
			// text-align: center;
			height: 88rpx;
			line-height: 88rpx;
			font-size: 36rpx;
			color: #fff;
			padding: 0 37rpx;
		}

		.back {
			width: 40rpx;
			height: 40rpx;
		}
	}

	.login-box {
		padding: 90rpx 100rpx 0;

		.box-title {
			line-height: 75rpx;
			font-size: 46rpx;
			margin-bottom: 105rpx;
			color: #64b6a8;
			font-weight: 600;
		}

		.input-box {
			height: 65rpx;
			border-bottom: 1rpx solid #d0d0d0;
			position: relative;
			margin-bottom: 52rpx;

			input {
				width: 100%;
				height: 64rpx;
				line-height: 64rpx;
				color: #333;
				font-size: 28rpx;
			}

			.area {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 0;
			}

			.line {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				color: #333;
				left: 60rpx;
				height: 30rpx;
				width: 2rpx;
				background: #333;
			}

			.getcode {
				position: absolute;
				top: 50%;
				right: 0;
				transform: translateY(-50%);
				color: #64b6a8;
				font-size: 28rpx;
				z-index: 10;
			}
		}

		.agreement {
			display: flex;
			padding-left: 10rpx;
			padding-top: 50rpx;
			font-size: 26rpx;
			align-items: center;

			.checkbox-group {
				/* #ifdef APP-PLUS || H5 */
				width: 32rpx !important;
				height: 40rpx !important;
				/* #endif */
			}

			.text {
				display: flex;
				align-items: center;
				line-height: 37rpx;
				margin-left: 10rpx;
			}

			.tags {
				color: #64b6a8;
			}
		}

		.login {
			width: 100%;
			height: 76rpx;
			line-height: 76rpx;
			background: #64b6a8;
			color: #fff;
			border-radius: 100rpx;
			margin-top: 138rpx;
			margin-bottom: 24rpx;
		}

		.flex-end {
			display: flex;
			justify-content: space-between;
			align-items: center;

			view {
				font-size: 26rpx;
				line-height: 37rpx;
				color: #666666;
			}
		}
	}

	.bottom-nav {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		padding: 0 0 80rpx;

		.bottom-top {
			display: flex;
			align-items: center;
			justify-content: space-around;
			height: 40rpx;
			width: 550rpx;
			margin: 0 auto 58rpx;

			.line {
				width: 100rpx;
				height: 2rpx;
				background: #666;
			}

			.title-text {
				font-size: 28rpx;
				color: #666;
			}
		}

		.bottom-loginType {
			display: flex;
			justify-content: center;
			align-items: center;

			.type {
				width: 120rpx;
				text-align: center;
				margin-right: 60rpx;

				image {
					width: 80rpx;
					height: 80rpx;
				}

				view {
					font-size: 28rpx;
					line-height: 40rpx;
					margin-top: 10rpx;
				}
			}

			.type:last-child {
				margin-right: 0;
			}
		}
	}

	.agreement {
		display: flex;
		padding-left: 10rpx;
		padding-top: 50rpx;
		font-size: 24rpx;
		align-items: center;

		.checkbox-group {
			// width: 50rpx !important;
			// height: 40rpx !important;
			/* #ifdef MP */
			width: 50rpx !important;
			height: 50rpx !important;
			/* #endif */
			/* #ifdef APP-PLUS || H5 */
			width: 32rpx !important;
			height: 32rpx !important;
			/* #endif */
		}

		.text {
			display: flex;
			align-items: center;
			line-height: 37rpx;
			margin-left: 10rpx;
		}

		.tags {
			color: #64b6a8;
		}
	}

	.motaikuang {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 20;

		.verify {
			position: fixed;
			left: 50%;
			top: 50%;
			transform: translate(-50%, -50%);
		}
	}

	.motaikuang1 {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.4);
		z-index: 20;

		.text {
			position: fixed;
			bottom: 0;
			width: 100%;
			background: #fff;
			left: 0;
			padding-top: 60rpx;
			padding-bottom: 100rpx;
			border-radius: 50rpx 50rpx 0 0;

			.textTitle {
				font-size: 36rpx;
				line-height: 50rpx;
				text-align: center;
				margin-bottom: 50rpx;
			}

			.scroll-view {
				height: 700rpx;
				margin: 0 auto;
				width: 630rpx;
			}
		}
	}

	/deep/.uni-checkbox-input-checked {
		background-color: #64b6a8 !important;
		border-color: #64b6a8 !important;
	}

	/deep/ .uni-checkbox-input {
		border-color: #666;
		background: #fff;
	}
</style>
